<template>
	<view class="container">
		<view class="main flex-column align-center">
			<swiperCard></swiperCard>
			<view class="card-box basic-info margin-top-sm flex-column align-center">
				<view class="info-top flex-row margin-top-sm">
					<view class="job-name flex-row align-center">
						<text class="text-bold">欧菲光电子厂流水线工人</text>
					</view>
					<view class="job-salary text-right">
						<text class="text-bold text-blue text-xl">3-4k</text>
					</view>
				</view>
				<view class="place-info margin-top-xs text-gray text-xs">
					<text class="fa fa-map-marker"></text>
					<text class="margin-left-xs">南昌市青山湖区</text>
				</view>
				<view class="request-info text-gray text-xs">
					<text class="fa fa-briefcase"></text>
					<text class="margin-left-xs">经验不限</text>
					<text class="fa fa-graduation-cap margin-left-sm"></text>
					<text class="margin-left-xs">学历不限</text>
					<text>2020-09-06</text>
				</view>
			</view>
			
			<!-- 发布人 -->
			<view class="card-box margin-top-sm flex-column align-center">
				<view class="tip-title tip-img">
					<text>发布人</text>
					<image src="../../../static/success.png" class="avatar-sm"></image>
					<text class="margin-left-sm">杨先生 人事部</text>
				</view>
			</view>
			
			<!-- 相关要求 -->
			<!-- <view class="relate-request card-box margin-top-sm flex-column align-center">
				<view class="tip-title">
					<text>相关要求</text>
				</view>
				<view class="request-tag-list margin-top-xs flex-row">
					<view class="tag-item bg-gray" 
					v-for="(tagItem, index) in tagList" :key="index">
						<text>带薪休假</text>
					</view>
				</view>
			</view> -->
			
			<!-- 职位描述 -->
			<view class="card-box job-intro  margin-top-sm flex-column align-center">
				<view class="tip-title">
					<text>职位介绍</text>
				</view>
				<view class="intro margin-top-sm">
					<text class="text-xs" selectable="true">
						声明！声明！
						职位 base 上海 或 杭州 ！ 告诉我意向城市 ~ 谢谢
						职位描述
						1、负责线下业务H5模块和其他产品前端的架构设计和开发工作
						2、负责插件开发，模块化框架设计与开发
						3、负责Web App及混合App的前沿技术研究和新技术调研。
						职位要求
						1、熟练运用Javascript语言与HTML5、CSS3等技术，熟悉移动端Web绘图相关高级特性，如canvas,webGL,CSS3动画效果等
						2、熟悉模块化、前端编译和构建工具，熟练运用主流的移动端JS库和开发框架，并深入理解其设计原理，例如 React. Redux. Vue等
						3、能提供完善的WebApp和混合App (JS方向)技术方案，了解服务端(node/java或其他语言)或native移动应用开发
						4、对技术有强烈的进取心，具有良好的沟通能力和团队合作精神、优秀的分析问题和解决问题的能力
						5、有团队管理经验，开源项目开发经验者优先。
					</text>
				</view>
			</view>
			
			<!-- 公司介绍 -->
			<view class="card-box job-intro margin-top-sm flex-column align-center">
				<view class="tip-title">
					<text>公司介绍</text>
				</view>
				<view class="intro margin-top-sm">
					<text class="text-xs" selectable="true">
						声明！声明！
						职位 base 上海 或 杭州 ！ 告诉我意向城市 ~ 谢谢
						职位描述
						1、负责线下业务H5模块和其他产品前端的架构设计和开发工作
						2、负责插件开发，模块化框架设计与开发
						3、负责Web App及混合App的前沿技术研究和新技术调研。
						职位要求
						1、熟练运用Javascript语言与HTML5、CSS3等技术，熟悉移动端Web绘图相关高级特性，如canvas,webGL,CSS3动画效果等
						2、熟悉模块化、前端编译和构建工具，熟练运用主流的移动端JS库和开发框架，并深入理解其设计原理，例如 React. Redux. Vue等
						3、能提供完善的WebApp和混合App (JS方向)技术方案，了解服务端(node/java或其他语言)或native移动应用开发
						4、对技术有强烈的进取心，具有良好的沟通能力和团队合作精神、优秀的分析问题和解决问题的能力
						5、有团队管理经验，开源项目开发经验者优先。
					</text>
				</view>
			</view>
			
			<!-- 上班地点 -->
			<view class="card-box company-address margin-top-sm flex-column align-center">
				<view class="tip-title">
					<text>上班地点</text>
				</view>
				<view class="intro margin-top-sm page-section page-section-gap">
					<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
				</view>
			</view>
		</view>
		<BottomBar></BottomBar>
	</view>
</template>

<script>
	import BottomBar from '@/components/BottomBar.vue';
	import swiperCard from '@/components/swiperCard.vue';
	export default {
		data() {
			return {
				tagList: [
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					''
				],
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}]
			}
		},
		components: {
			BottomBar, swiperCard
		},
		mounted() {
			//   wx请求获取位置权限
			this.getAuthorize()
				.then(() => {
					//   同意后获取
					this.getLocationInfo();
				})
				.catch(() => {
					
				});
		},
		methods: {
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						console.log(res)
						that.covers = [
							{
								id: "",
								latitude: res.latitude,
								longitude: res.longitude,
								iconPath: "../../static/mark.png",
								width: that.markerHeight, //宽
								height: that.markerHeight, //高
							},
						];
					},
					fail: function (e) {
						console.log(e)
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.main {
		width: 100%;
		height: auto;
	}
	.card-box {
		background-color: white;
		border-radius: 10rpx;
		width: 94%;
	}
	
	.basic-info {
		height: 270rpx;
	}
	
	.basic-info .info-top {
		width: 94%;
		height: 100rpx;
	}
	
	.basic-info .info-top .job-name {
		width: 80%;
		font-size: 38rpx;
		line-height: 50rpx;
	}
	
	.basic-info .info-top .job-salary {
		width: 20%;
		height: 100rpx;
		line-height: 100rpx;
	}
	
	.basic-info .place-info {
		width: 94%;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.basic-info .request-info {
		width: 94%;
		height: 60rpx;
		line-height: 60rpx;
		position: relative;
	}
	
	.basic-info .request-info text:last-of-type {
		position: absolute;
		right: 0;
	}
	
	.tip-title {
		width: 94%;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #f1f1f1;
	}
	
	.user-info {
		width: 94%;
		height: 180rpx;
	}
	
	.user-info .user-card {
		width: 94%;
		height: 100rpx;
	}
	
	.relate-request {
		height: auto;
	}
	
	.relate-request .request-tag-list {
		width: 94%;
		height: auto;
		margin-bottom: 10rpx;
		flex-wrap: wrap;
	}
	
	.relate-request .request-tag-list .tag-item {
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 10rpx;
		font-size: 12px;
		border-radius: 5rpx;
		color: #606266;
		margin-top: 10rpx;
		margin-left: 20rpx;
		white-space: nowrap;
	}
	
	.job-intro {
		width: 94%;
		height: auto;
		/* margin-bottom: 160rpx; */
	}
	
	.job-intro>.company-address, .intro {
		width: 94%;
		height: auto;
		line-height: 50rpx;
		margin-bottom: 20rpx;
	}
	
	.company-address {
		width: 94%;
		height: auto;
		margin-bottom: 140rpx;
	}
	
	.container >>> .re-bottom {
		position: fixed;
		bottom: 0;
	}
	
	.avatar-sm {
		top: 11%;
	}
</style>
